<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程直播</title>
</head>
<body>
 <div class="mainContainer" >
        <video id="videoElement" controls autoplay width="680"  muted="muted" height="370"></video>
    </div>
 <br>
    
 <script src="/static/lib/flv/flv.min.js" type="text/javascript" ></script>
   <script>
   
   function getQueryVariable(variable){
          var query = window.location.search.substring(1);
          var vars = query.split("&");
          for (var i=0;i<vars.length;i++) {
                  var pair = vars[i].split("=");
                  if(pair[0] == variable){return pair[1];}
          }
          return(false);
   }
      var vid=getQueryVariable("vid")
        var flvjs = window.flvjs
        var videoElementzzz  = document.getElementById('videoElement');
      
    
        var flvPlayer;
        var  configz={
  		  enableWorker: true,
          enableStashBuffer: false,
          stashInitialSize: 128,
          lazyLoadMaxDuration: 3*60,
          fixAudioTimestampGap: false,
          autoCleanupSourceBuffer: true,
          
	 };
        if (flvjs.isSupported()) {
             flvPlayer = flvjs.createPlayer({
                type: 'flv',
                isLive : true,
               url: 'http://47.92.196.10:8080/live/1.flv',//改为自己服务的地址
            // url: 'http://192.168.1.179:8080/live/'+vid+'.flv',//改为自己服务的地址
                //url: 'http://127.0.0.1:8080/live/rfBd56ti2SMtYvSgD5xAV0YU99zampta7Z7S575KLkIZ9PYk.flv',//改为自己服务的地址
                
             enableWorker: true,
             enableStashBuffer: false,
             stashInitialSize: 128,
             lazyLoadMaxDuration: 3*60,
             fixAudioTimestampGap: false,
             autoCleanupSourceBuffer: true,
             
             // 如果是Android浏览器，建议enableDurationMonitor设置为false
             enableDurationMonitor: true,    // true表示监测当前直播流延时，当发现延时过大时，主动追赶
             enableVideoFrozenMonitor: true, // 监测视频解码是否停滞（画面卡停），当因为某些原因导致无法解码时，将上报VIDEO_FROZEN事件，收到后建议重拉流
              videoStateMonitorInterval: 1000, // 多长时间（毫秒）检查一次视频状态（延时、停滞）

             // 针对手机浏览器上对MSE以及网络连接更加容易不稳定，建议将maxDurationGap设置高一点，比如2.5、3、3.5，否则可能会频繁追赶延时导致画面卡顿
              lowLatencyThreshold: 1.5,        // 延迟追赶判断阈值下限
              highLatencyThreshold: 3,        // 延迟追赶判断阈值上限
             decreaseDurationStep: 2,       // 每次追赶至缓冲区末尾之前的多少秒
             // frozenTimesThreshold: 5,         // 解码停滞次数达到此阈值，上报VIDEO_FROZEN事件。注意如果设置过小的阈值，当推流端关闭摄像头后可能会频繁触发VIDEO_FROZEN事件

             // webrtc合流未能给cdn推送正确的视频分辨率信息，导致从MetaData/AVCDecoderConfigurationRecord中无法拿到正确的视频分辨率
             // 在内核低于Chromium 70的浏览器（如360浏览器、搜狗浏览器、PC微信内嵌浏览器等）中
             // 如果传递不对的视频分辨率，将会导致画面放大显示异常，因此，强行设置一个最大的视频宽高信息，来避免此问题
             // 如果是Safari浏览器，enableConstVideoViewSize建议设置为false
             // enableConstVideoViewSize: false, 
             // constVideoViewWidth: 1920,
             // constVideoViewHeight: 1080,

             // enableAudioGain: false,
              //audioGainLevel: gain_level,
             
             
            });
             
             
            flvPlayer.attachMediaElement(videoElementzzz );
            
            videoElementzzz.addEventListener('progress', function() {
                var range = 0;
                var bf = this.buffered;
                var time = this.currentTime;

                while(!(bf.start(range) <= time && time <= bf.end(range))) {
                    range += 1;
                }
                this.currentTime = this.buffered.end(range) - 0.01;
            });
            
            
            flvPlayer.load(); //加载
            flvPlayer.play();
            
            
        }
        
        
        function flv_start() {
        	flvPlayer.play();
        }
        function flv_pause() {
        	flvPlayer.pause();
        }
        function flv_destroy() {
        	flvPlayer.pause();
        	flvPlayer.unload();
        	flvPlayer.detachMediaElement();
        	flvPlayer.destroy();
        	flvPlayer = null;
        }
        flv_start();
        
        
        
        
        
    </script>
</body>
</html>